<template>
  <div>
    <div>
      <span class="el-menu__title">护工信息列表</span>
    </div>
    <el-row style="margin-top: auto">
      <el-table :data="currUserList" height="600"
                id="User"
                border stripe
                highlight-current-row
                @current-change="addSala"
                style="width: 100%"
                size="mini"
                v-loading="userTableLoading">
        <el-table-column prop="id" label="编号" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="username" label="用户名" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="realname" label="真实姓名" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="sex" label="性别" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="age" label="年龄" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="address" label="住址" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="telephone" label="联系方式" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="salary" label="薪资" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
        <el-table-column prop="assStatus" label="在岗状态" align="center" :show-overflow-tooltip="true"
                         sortable></el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[10,20,30]"
        layout="total, sizes, prev, pager, next, jumper"
        style="padding-top: 10px;float: right;"
        :total="dataListsCount">
      </el-pagination>
    </el-row>
    <el-button type="primary" @click="dialogVisible = true">调 薪</el-button>
    <el-dialog
      title="加薪"
      :visible.sync="dialogVisible">

      <el-form :data="currentRow" label-position="right">

        <el-form-item label="护工用户名" prop="assId">
          <el-col :span="4">
            <el-input v-model="currentRow.username" readonly placeholder=""></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="薪资" prop="assId">
          <el-col :span="4">
            <el-input v-model="currentRow.salary" readonly placeholder=""></el-input>
          </el-col>
          <el-col :span="2" style="text-align: center">
            <span>---------</span>
          </el-col>
          <el-col :span="4">
            <el-input v-model="updateUser.salary" clearable placeholder="请输入调整后的护工薪资"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
    import {postRequest} from "../../utils/api";

    export default {
        name: "AddSalary",
        data() {
            return {
                //  当前页数
                currentPage: 1,
                // 显示条数
                pageSize: 10,
                // 数据总条数
                dataListsCount: 0,
                // curr Data
                currUserList: [],
                // total Data
                User: [],
                userTableLoading: false,
                currentRow: {},
                dialogVisible: false,
                updateUser: {
                    salary: ''
                }
            }

        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
                let array = this.currUserList
                if (array.length > 0 && array !== null && array !== undefined) {
                    this.currentPage = 1
                    this.init()
                }
            },
            handleCurrentChange(val) {
                this.currUserList = []
                this.currentPage = val
                if (this.pageSize * val > this.User) {
                    for (let i = this.pageSize * (val - 1); i < this.User; i++) {
                        this.currUserList.push(this.User[i])
                    }
                } else {
                    for (let i = this.pageSize * (val - 1); i < this.pageSize * val; i++) {
                        this.currUserList.push(this.User[i])
                    }
                }
            },
            init() {
                // 初始化加载显示所有用户信息。
                postRequest('/assistant/findAll', {}).then(res => {
                    this.currentPage = 1 // 当前页码
                    this.User = [] // total Data
                    this.currUserList = [] // current Data
                    this.dataListsCount = res.retList.length
                    this.User = res.retList;
                    for (let i = 0, len = this.User.length; i < len; i++) {
                        if (this.User[i].assStatus === '0') {
                            this.User[i].assStatus = '空闲'
                        }
                        if (this.User[i].assStatus === '1') {
                            this.User[i].assStatus = '在岗'
                        }
                        if (this.User[i].assStatus === '2') {
                            this.User[i].assStatus = '请假'
                        }
                    }
                    // 分页分割
                    if (this.dataListsCount > this.pageSize) {
                        for (let i = 0; i < this.pageSize; i++) {
                            this.currUserList.push(this.User[i])
                        }
                    } else {
                        this.currUserList = this.User
                    }
                })
            },
            addSala(val) {
                this.currentRow = val;
            },
            add() {
                if (this.currentRow === '' || this.currentRow === null || this.currentRow.username === '') {
                    this.$message.warning('请先选择护工');
                } else {
                    postRequest('/assistant/Addsalary',
                        {
                            'username': this.currentRow.username,
                            'salary': this.updateUser.salary
                        }
                    ).then(res => {
                        if (res && res.flag === '1') {
                            this.$message.success(' 护工薪资修改成功');
                            this.$router.push('/ManagerHome/AddSalary')
                            this.dialogVisible = false
                        }
                    })
                }
            }
        }, // methonds
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>

</style>
